<template>
  <div>
    <!-- 限价 市价 止盈止损 -->
    <div
      class="trans-tabbox text-bold quotet3 text-14 p-center mb-12 flex js-st point"
    >
      <div
        v-for="item in state.transTab"
        :key="item.id"
        class="trans-tab"
        @click="changeTab(item.id)"
        :class="{
          'tabactive text-bolder quotet2': tabActive === item.id,
        }"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="p-center">
      <div class="trans-box flex js-sp" v-loading="state.loading">
        <!-- 买入 -->
        <div class="trans-buy">
          <div class="canuse text-left flex js-sp" v-if="islogin">
            <div class="text-10">
              <span class="quotet3 text-bold" style="margin-inline-end:8px">
                {{ $t("deal.available") }}
              </span>
              <span class="family-d color_1e text-bolder"
                >{{ $currency(state.balance?.legal_balance) }} USDT</span
              >
            </div>
            <div
              v-if="!virtual_wallet"
              @click="state.dialogExchange = true"
              class="text-bold personlink point"
            >
              {{ $t("lever.transfer") }}
            </div>
          </div>
          <div
            class="input-box radius flex js-ed align-center quoteinpbg mb-16"
          >
            <div class="price-text  quotet3">
              {{ $t("exchange.price") }}
            </div>
            <el-input
              :placeholder="state.buy_holder"
              :disabled="tabActive === 2"
              v-model="state.buyParam.unit_price"
              @input="transactionBuyPrice"
              :controls="false"
              placeholder-color="red"
              class="customer-input quotet3 w_100"
              type="text"
            />
            <div class="quotet3">USDT</div>
          </div>
          <div
            class="input-box radius flex js-sp align-center quoteinpbg mb-16 quote-input-line "
          >
            <!-- 如果是市价交易显示交易额 -->
            <!-- <div
              class="quotet3 text-14 text-left"
              style="width:60px"
              v-if="tabActive === 2"
            >
              {{ $t("financial.transactionAmount") }}
            </div>
            <div class="flex js-sp align-center" v-if="tabActive === 2">
              <div class="input_media">
                <el-input
                  v-model="state.buyParam.total_price"
                  type="text"
                  :placeholder="$t('formTip.tradeAmountTip')"
                  @input="buyTransTotal"
                  @mousewheel.prevent
                  placeholder-color="red"
                  class="customer-input quotet3"
                ></el-input>
              </div>
              <div class="quotet3">
                USDT
              </div>
            </div> -->
            <!-- 如果为限价显示数量 -->
            <div class="quotet3 text-14 text-left" style="width:60px">
              {{ $t("assets.amount") }}
            </div>
            <div class="flex js-sp align-center">
              <div class="input_media">
                <el-input
                  v-model="state.buyParam.hand_amount"
                  type="text"
                  :placeholder="$t('deal.ennum')"
                  @input="buyTransTotal"
                  @mousewheel.prevent
                  placeholder-color="red"
                  class="customer-input quotet3"
                ></el-input>
              </div>
              <div class="quotet3 flex align-center">
                <div>{{ "x" + gettrading.per_hand_number }}</div>
                <div>{{ $t("stock.share") }}</div>
              </div>
            </div>
          </div>
          <!-- 滑动滑块 -->
          <div class="mb-16">
            <el-slider
              @change="buyslide"
              v-model="state.buy_slide"
              :format-tooltip="formatTooltip"
            ></el-slider>
          </div>
          <div
            class="text-left mb-16 quotet3 text-10"
            v-if="tabActive === 1 || tabActive === 3"
          >
            {{ $t("stock.turnover") }}：{{
              $currency(
                rideFix(
                  rideFix(
                    state.buyParam.hand_amount,
                    gettrading.per_hand_number
                  ),
                  state.buyParam.unit_price
                )
              ) || "-"
            }}
          </div>
          <div
            class="quote-btn red-bg  share-color text-16 point"
            :class="isRestDate ? 'btn-disabled' : ''"
            @click="buysell(1)"
            v-if="islogin"
          >
            {{ isRestDate ? $t("stock.closed") : $t("exchange.buy") }}
          </div>
          <div
            class="tralation-btn quote-btn text-16 flex align-center js-ct text-bold"
            v-else
          >
            <router-link to="/login" class="point">{{
              $t("login.login")
            }}</router-link>
            <div class="color_42  lr-5">{{ $t("login.or") }}</div>
            <router-link to="/register" class="point">{{
              $t("register.register")
            }}</router-link>
          </div>
        </div>
        <!-- 卖出 -->
        <div class="trans-sell">
          <div class="canuse text-left flex js-sp" v-if="islogin">
            <div class="text-10">
              <span class="quotet3 text-bold" style="margin-inline-end:8px">
                {{ $t("deal.available") }}
              </span>
              <span class="family-d color_1e text-bolder"
                >{{ $currency(state.balance?.hold_amount) }}
                {{ $t("stock.share") }}</span
              >
              <span class="family-d color_1e text-bolder">
                ≈{{
                  $currency(
                    rideFix(
                      state.balance?.hold_amount,
                      state.sellParam.unit_price
                    )
                  )
                }}
                USDT
              </span>
            </div>
            <!-- <div class="text-bold personlink">充值</div> -->
          </div>

          <!-- 止盈止损触发价 -->
          <div
            v-if="tabActive === 3"
            class="input-box radius flex js-sp align-center quoteinpbg mb-16"
          >
            <div class="quotet3 text-12 text-left" style="width:60px">
              {{ $t("deal.triggerprice") }}
            </div>
            <div class="flex js-sp align-center">
              <el-input
                :placeholder="$t('deal.entrigger')"
                v-model="state.sellParam.transaction_trigger_price"
                @input="sellTransTrigger"
                :controls="false"
                placeholder-color="red"
                class="customer-input quotet3"
                type="text"
              />
              <div class="quotet3">USDT</div>
            </div>
          </div>
          <div
            class="input-box radius flex js-ed align-center quoteinpbg mb-16"
          >
            <div class="price-text quotet3">
              {{ $t("exchange.price") }}
            </div>
            <el-input
              :placeholder="state.sell_holder"
              v-model="state.sellParam.unit_price"
              @input="sellTransUnit"
              :controls="false"
              :disabled="tabActive === 2"
              placeholder-color="red"
              class="customer-input quotet3 w_100"
              type="text"
            />
            <div class="quotet3">USDT</div>
          </div>
          <div
            class="input-box radius flex js-sp align-center quoteinpbg mb-16 quote-input-line "
          >
            <!-- 如果是限价交易显示选择框选择数量或成交额 -->
            <!-- <div
              class="select-frame flex js-ar align-center framebg"
              @click="state.sellselect = !state.sellselect"
              v-if="tabActive === 1"
              v-clickout="close"
            >
              <span class="quotet3 text-14 mr-10">
                {{
                  state.buylabel === 1
                    ? $t("assets.amount")
                    : $t("deal.transamount")
                }}
              </span>
              <div class="selectbox flex align-center js-ct">
                <img
                  src="@/assets/theme1/down.png"
                  alt=""
                  srcset=""
                  v-if="!state.sellselect"
                />
                <img src="@/assets/theme1/up.png" alt="" srcset="" v-else />
              </div>
              <div
                class="num-nover quoteinpbg radius quotet2 point"
                v-if="state.sellselect"
              >
                <div
                  class="num text-left"
                  @click.stop="choice(item.id, 'sell')"
                  v-for="item in numBox"
                  :key="item.id"
                >
                  {{ item.name }}
                </div>
              </div>
            </div> -->
            <!-- 如果为市价、止盈止损显示label -->
            <div class="quotet3 text-14 text-left" style="width:40px">
              {{ $t("assets.amount") }}
            </div>
            <div class="flex js-sp align-center">
              <div class="input_media">
                <!-- <el-input-number
                  :placeholder="$t('deal.enter')"
                  v-model="state.sellParam.hand_amount"
                  :controls="false"
                  @blur="countsellSlide"
                  placeholder-color="red"
                  class="customer-input quotet3"
                  type="text"
                />-->
                <el-input
                  v-model="state.sellParam.hand_amount"
                  type="text"
                  :placeholder="$t('deal.ennum')"
                  @input="sellTransTotal"
                  @mousewheel.prevent
                  placeholder-color="red"
                  class="customer-input quotet3"
                ></el-input>
              </div>
              <div class="quotet3 flex align-center">
                <div>{{ "x" + gettrading.per_hand_number }}</div>
                <div>{{ $t("stock.share") }}</div>
              </div>
            </div>
          </div>
          <!-- 滑动滑块 -->
          <div class="mb-16" style="z-index:10">
            <el-slider
              v-model="state.sell_slide"
              @change="sellslide"
              :format-tooltip="formatTooltip"
            ></el-slider>
          </div>
          <div
            class="text-left mb-16 quotet3 text-10"
            v-if="tabActive === 1 || tabActive === 3"
          >
            {{ $t("stock.turnover") }}：{{
              $currency(
                rideFix(
                  rideFix(
                    state.sellParam.hand_amount,
                    gettrading.per_hand_number
                  ),
                  state.sellParam.unit_price
                )
              ) || "-"
            }}
          </div>
          <div
            class="quote-btn green-bg  share-color  text-16 point"
            :class="isRestDate ? 'btn-disabled' : ''"
            v-if="islogin"
            @click="buysell(2)"
          >
            {{ isRestDate ? $t("stock.closed") : $t("exchange.sell") }}
          </div>
          <div
            class="tralation-btn quote-btn text-16 flex align-center js-ct radius text-bold"
            v-else
          >
            <router-link to="/login" class="point">{{
              $t("login.login")
            }}</router-link>
            <div class="color_42  lr-5">{{ $t("login.or") }}</div>
            <router-link to="/register" class="point">{{
              $t("register.register")
            }}</router-link>
          </div>
        </div>
      </div>
    </div>
    <VerifiedBox
      :text="$t('formTip.certificationTip1')"
      :dialog="state.dialogVerfiedTip"
      @onconfirm="onConfirm"
      @viewSafeStatus="onConfirm"
      :type="state.type"
      @oncancer="onCancel"
    />
    <!-- 划转 -->
    <el-dialog
      :title="$t('assets.fundTransfer')"
      v-model="state.dialogExchange"
      width="400px"
    >
      <Huazhuan
        v-if="state.dialogExchange"
        :type="2007"
        :downplace="true"
        @close="state.dialogExchange = false"
        @getbalance="getbalance"
      />
      <!-- <Exchange
        v-if="state.dialogExchange"
        @close="state.dialogExchange = false"
        @getbalance="getbalance"
      /> -->
    </el-dialog>
  </div>
</template>

<script>
import { computed, onMounted, reactive, watch, ref } from "vue";
import { stockBalance, stockOrderMakeOrder } from "@/api/stock";
import { demostockOrderMakeOrder, demostockBalance } from "@/api/demo";
import UseSystemSetting from "@/commonapi/useSystemSetting";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
import { decimalDigitsInputFilter, toBeNumber } from "@/utils/common";
import { useI18n } from "vue-i18n";
import { rideFix, exceptFix } from "@/utils/precisionMath";
import VerifiedBox from "@/components/verifiedBox/index.vue";
import { useRouter } from "vue-router";
import Huazhuan from "@/components/personModel/assets/huazhuan.vue";

export default {
  components: { VerifiedBox, Huazhuan },
  props: { nowprice: Number, isRoke: Boolean, isRestDate: Boolean },
  emits: ["refreshParent", "changeRoke", "isRestDateFun"],
  setup(props, ctx) {
    const $store = useStore();
    const { t } = useI18n();
    const tabActive = ref(1); //1限价2市价3止盈止损
    const changeTab = (i) => {
      tabActive.value = i;
      state.isNull = true;
      state.isNull1 = true;
      // state.buyParam.unit_price = props.nowprice;
      // state.sellParam.unit_price = props.nowprice;
      reseFrom();
    };
    const state = reactive({
      type: 0,
      dialogExchange: false,
      transTab: [
        { name: t("deal.limittrans"), id: 1 },
        { name: t("deal.markettrans"), id: 2 },
        // { name: t("deal.stoploss"), id: 3 }
      ],
      price: "",
      buylabel: 1, //选择数量或交易额 1数量 2交易额
      buyParam: {}, //买入参数
      sellParam: {}, //卖出参数
      balance: {}, //账户余额
      buyselect: false, //买入选择数量交易额弹窗
      sellselect: false, //卖出选择数量交易额弹窗
      loading: false,
      buy_slide: 0, //买入滑块
      sell_slide: 0, //卖出滑块
      buy_holder: t("deal.enprice"), //提示语根据限价交易选择的数量或交易额变动
      sell_holder: t("deal.enprice"), //提示语根据限价交易选择的数量或交易额变动
      isNull: true,
      isNull1: true,
      dialogVerfiedTip: false,
    });
    // 获取开关状态
    const { virtual_wallet } = UseSystemSetting();
    const gettrading = computed(() => {
      return $store.state.exchange.stock_data;
    });
    const islogin = computed(() => {
      return $store.state.user.token ? true : false;
    });
    const $router = useRouter();
    watch(
      () => gettrading.value?.id,
      (val) => {
        console.log(val);
        state.buy_slide = 0;
        state.sell_slide = 0;
        state.buyParam = {}; //买入参数
        state.sellParam = {}; //卖出参数
      }
    );
    watch(gettrading, () => {
      if ($store.state.user.token) {
        getbalance();
      }
      setTimeout(() => {
        state.buyParam.unit_price = props.nowprice;
        state.sellParam.unit_price = props.nowprice;
      }, 1500);
    });
    watch(
      () => props.isRoke,
      (val) => {
        if ($store.state.user.token && val) {
          getbalance();
          ctx.emit("changeRoke");
        }
      }
    );
    watch(
      () => props.nowprice,
      (val) => {
        // console.log("prop", val,state.buyParam.unit_price,state.isNull,tabActive.value);
        if (
          !state.buyParam.unit_price &&
          state.isNull &&
          tabActive.value != 2
        ) {
          state.buyParam.unit_price = val;
        }
        if (
          !state.sellParam.unit_price &&
          state.isNull1 &&
          tabActive.value != 2
        ) {
          state.sellParam.unit_price = val;
        }
      }
    );
    // 滑块数字+%号
    const formatTooltip = (val) => {
      return val + "%";
    };
    const numBox = reactive([
      { name: t("assets.amount"), id: 1 },
      { name: t("deal.transamount"), id: 2 },
    ]);
    /**
     * methods
     */
    onMounted(() => {
      reseFrom();
      if ($store.state.user.token && gettrading.value) {
        getbalance();
      }
    });
    const close = () => {
      state.sellselect = false;
      state.buyselect = false;
    };
    const choice = (id, type) => {
      state.buylabel = id;
      if (type === "buy") {
        state.buyselect = true;
      } else {
        state.sellselect = true;
      }
      reseFrom();
      close();
    };
    // 获取余额
    const getbalance = () => {
      let setFun = virtual_wallet.value ? demostockBalance : stockBalance;
      setFun(gettrading.value.id).then((res) => {
        state.balance = res.data;
      });
    };
    // 清空数据
    const reseFrom = () => {
      state.buyParam = {};
      state.sellParam = {};
      state.buy_slide = 0;
      state.sell_slide = 0;
      state.buyParam.unit_price = props.nowprice;
      state.sellParam.unit_price = props.nowprice;
      if (tabActive.value === 2) {
        state.buy_holder = t("deal.bestpricebuy");
        state.sell_holder = t("deal.bestpricesell");
      } else {
        state.buy_holder = t("deal.enprice");
        state.sell_holder = t("deal.enprice");
      }
    };
    // 买入滑动滑块
    const buyslide = (val) => {
      if (!$store.state.user.token) {
        return;
      }
      if (tabActive.value === 1) {
        if (state.buyParam.unit_price) {
          state.buyParam.hand_amount = decimalDigitsInputFilter(
            (state.balance.legal_balance /
              (gettrading.value?.handling_fee * 1 + 1) /
              (state.buyParam.unit_price * gettrading.value?.per_hand_number)) *
              (val / 100),
            0
          );
        } else {
          ElMessage.error(t("deal.enCommissionPrice"));
          return;
        }
      } else {
        if (tabActive.value === 2) {
          state.buyParam.hand_amount = decimalDigitsInputFilter(
            (state.balance.legal_balance /
              (gettrading.value?.handling_fee * 1 + 1) /
              (gettrading.value?.close_price *
                gettrading.value?.per_hand_number)) *
              (val / 100),
            0
          );
        }
        console.log(gettrading.value);
      }
    };
    // 卖出滑动滑块
    const sellslide = (val) => {
      if (!$store.state.user.token) {
        return;
      }
      if (tabActive.value === 1) {
        if (state.sellParam.unit_price) {
          state.sellParam.hand_amount = decimalDigitsInputFilter(
            exceptFix(
              exceptFix(
                rideFix(state.balance.hold_amount, val),
                gettrading.value.per_hand_number
              ),
              100
            ),
            0
          );
        } else {
          ElMessage.error(t("deal.enCommissionPrice"));
          return;
        }
      } else {
        state.sellParam.hand_amount = decimalDigitsInputFilter(
          exceptFix(
            exceptFix(
              rideFix(state.balance.hold_amount, val),
              gettrading.value.per_hand_number
            ),
            100
          ),
          gettrading.value.stock_currency_accuracy
        );
      }
    };
    // 计算买入滑块
    const countbuySlide = () => {
      if (!$store.state.user.token) {
        return;
      }
      if (state.balance.legal_balance === 0) {
        return;
      }
      if (state.buyParam.hand_amount) {
        // 如果是限价交易buylabel=1或止盈止损 hand_amount都是数量
        //用数量除以 /（总额除以单价）
        if (tabActive.value === 1 || tabActive.value === 3) {
          if (!state.buyParam.unit_price) {
            return;
          }
          state.buy_slide = decimalDigitsInputFilter(
            ((state.buyParam.hand_amount *
              gettrading.value?.per_hand_number *
              state.buyParam?.unit_price) /
              state.balance.legal_balance) *
              100,
            gettrading.value.stock_currency_accuracy
          );
          state.buy_slide = Number(state.buy_slide);
        } else {
          //如果为市价或交易额的时候 直接交易额除以总额
          state.buy_slide = decimalDigitsInputFilter(
            (state.buyParam.total_price / state.balance.legal_balance) * 100,
            gettrading.value.stock_currency_accuracy
          );
          state.buy_slide = Number(state.buy_slide);
        }
      }
    };
    // 计算卖出滑块
    const countsellSlide = () => {
      if (!$store.state.user.token) {
        return;
      }
      if (state.balance.hold_amount === 0) {
        return;
      }
      if (state.sellParam.hand_amount) {
        // if (tabActive.value === 1) {
        //   //当是交易额时
        //   state.sell_slide = decimalDigitsInputFilter(
        //     (state.sellParam.hand_amount /
        //       (state.sellParam.unit_price * state.balance.hold_amount)) *
        //       100,
        //     gettrading.value.stock_currency_accuracy
        //   );
        // } else {
        // 如果是限价交易buylabel=1或或市价止盈止损 hand_amount都是数量
        //直接用数量/总额
        state.sell_slide = decimalDigitsInputFilter(
          ((state.sellParam.hand_amount * gettrading.value.per_hand_number) /
            state.balance.hold_amount) *
            100,
          gettrading.value.stock_currency_accuracy
        );
        // }
        state.sell_slide = Number(state.sell_slide);
      }
    };
    const onConfirm = () => {
      state.dialogVerfiedTip = false;
      $router.push("/person/Authentication");
    };
    const onCancel = () => {
      state.dialogVerfiedTip = false;
    };
    //是否需要实名
    const isVerified = computed(() => {
      let list = $store.state.user.systemInfo;
      let flag = false;
      list.forEach((ele) => {
        if (ele.key === "verify_switch") {
          if (
            ele.value[7] &&
            $store.state.user.securityInfo.user_auth_level !== 2
          ) {
            if ($store.state.user.securityInfo.user_auth_level !== 4) {
              state.type = 1;
            }
            flag = true;
          }
        }
      });
      return flag;
    });
    // 买入// 卖出
    const buysell = (type) => {
      if (isVerified.value) {
        state.dialogVerfiedTip = true;
        return false;
      }
      if (props.isRestDate) {
        return false;
      }
      const param = type === 1 ? state.buyParam : state.sellParam;
      if (!param.unit_price && tabActive.value !== 2) {
        ElMessage.error(t("deal.enCommissionPrice"));
        return;
      }
      if (tabActive.value === 3 && !param.transaction_trigger_price) {
        ElMessage.error(t("deal.entrigger"));
        return;
      }
      // 如果是限价交易与止盈止损判断数量，市价买入判断交易额
      // if (tabActive.value === 2 && type === 1) {
      //   if (!param.total_price) {
      //     ElMessage.error(t("formTip.tradeAmountTip"));
      //     return;
      //   }
      // } else {
      if (!param.hand_amount) {
        if (tabActive.value === 1) {
          ElMessage.error(t("deal.ennum"));
          return;
        } else {
          ElMessage.error(t("deal.ennum"));
          return;
        }
      }
      // }
      // 如果是买入
      if (type === 1) {
        //  判断是限价和数量或止盈止损
        if (
          //数量比较
          param.hand_amount > gettrading.value.max_buy_hand
        ) {
          ElMessage.error(
            t("deal.buymax") + gettrading.value.max_buy_hand + t("stock.hand")
          );
          return;
        }
        if (param.hand_amount < gettrading.value.min_buy_hand) {
          ElMessage.error(
            t("deal.buymin") + gettrading.value.min_buy_hand + t("stock.hand")
          );
          return;
        }
      } else {
        //如果是卖出
        //如果是其他都是数量直接判断
        if (param.hand_amount > gettrading.value.max_sell_hand) {
          ElMessage.error(
            t("deal.nummax") + gettrading.value.max_sell_hand + t("stock.hand")
          );
          return;
        }
        if (param.hand_amount < gettrading.value.min_sell_hand) {
          ElMessage.error(
            t("deal.nummin") + gettrading.value.min_sell_hand + t("stock.hand")
          );
          return;
        }
      }
      confirm(type);
    };

    const confirm = (direction) => {
      // 判断tabActive 1为限价 2为市价 3为止盈止损
      let param = { ...state.buyParam };
      // 判断买卖
      if (direction === 2) {
        param = { ...state.sellParam };
      }
      // if (tabActive.value === 2) {
      //   param.hand_amount = null;
      // } else {
      //   param.total_price = null;
      // }
      param.hand_amount = rideFix(
        Number(param.hand_amount),
        gettrading.value?.per_hand_number
      );
      param.id = gettrading.value.id;
      param.direction = direction;
      param.order_type =
        tabActive.value === 1 ? 2 : tabActive.value === 2 ? 1 : 3;
      // 2市价传数量 1限价传数量
      placeOrder(param);
    };
    // 数字过滤，保留小数
    const transactionBuyPrice = (val) => {
      state.isNull = false;
      if (val) {
        let tempV = toBeNumber(val);
        state.buyParam.unit_price = decimalDigitsInputFilter(
          tempV,
          gettrading.value.stock_currency_accuracy
        );
        countbuySlide();
      }
    };
    const trBuyTriggerPrice = (val) => {
      if (val) {
        let tempV = toBeNumber(val);
        state.buyParam.transaction_trigger_price = decimalDigitsInputFilter(
          tempV,
          gettrading.value.stock_currency_accuracy
        );
      }
    };
    const buyTransTotal = (val) => {
      if (val) {
        let tempV = toBeNumber(val);
        if (tabActive.value === 2) {
          state.buyParam.hand_amount = decimalDigitsInputFilter(
            tempV,
            gettrading.value.stock_currency_accuracy
          );
        } else {
          state.buyParam.hand_amount = decimalDigitsInputFilter(tempV, 0);
        }
        countbuySlide();
      }
    };
    const sellTransTrigger = (val) => {
      if (val) {
        let tempV = toBeNumber(val);
        state.sellParam.transaction_trigger_price = decimalDigitsInputFilter(
          tempV,
          gettrading.value.stock_currency_accuracy
        );
      }
    };
    const sellTransUnit = (val) => {
      state.isNull1 = false;
      if (val) {
        let tempV = toBeNumber(val);
        state.sellParam.unit_price = decimalDigitsInputFilter(
          tempV,
          gettrading.value.stock_currency_accuracy
        );
        countsellSlide();
      }
    };
    const sellTransTotal = (val) => {
      if (val) {
        let tempV = toBeNumber(val);
        state.sellParam.hand_amount = decimalDigitsInputFilter(tempV, 0);
        countsellSlide();
      }
    };
    // 下单
    const placeOrder = (param) => {
      state.loading = true;
      let setFun = virtual_wallet.value
        ? demostockOrderMakeOrder
        : stockOrderMakeOrder;
      setFun(param)
        .then((res) => {
          state.loading = false;
          if (res.code === 200) {
            getbalance();
            ElMessage({
              type: "success",
              message: res.message,
            });
            ctx.emit("refreshParent");
            reseFrom();
          }
          if (res.code === 81008 || res.code === 81009 || res.code === 81010) {
            ElMessage({
              type: "error",
              message: res.message,
            });
            ctx.emit("isRestDateFun", res.data.system_time);
          }
        })
        .catch((err) => {
          state.loading = false;
          ElMessage.error(err.message);
        });
    };
    return {
      state,
      islogin,
      numBox,
      close,
      choice,
      formatTooltip,
      gettrading,
      getbalance,
      placeOrder,
      reseFrom,
      confirm,
      changeTab,
      tabActive,
      buyslide,
      sellslide,
      buysell,
      countbuySlide,
      countsellSlide,
      transactionBuyPrice,
      trBuyTriggerPrice,
      buyTransTotal,
      sellTransTrigger,
      sellTransUnit,
      sellTransTotal,
      rideFix,
      onConfirm,
      onCancel,
      isVerified,
      virtual_wallet,
    };
  },
};
</script>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>
<style lang="less" scoped>
.trans-box {
  width: 100%;
  padding-top: 4px;
}
.trans-buy {
  // border-right: 1px solid;
  width: 50%;
  padding-inline-end: 16px;
}
.canuse {
  height: 40px;
  line-height: 40px;
}
.trans-sell {
  width: 50%;
  padding-inline-start: 16px;
}
.input-box {
  width: 100%;
  height: 42px;
  position: relative;
  // border: 1px solid;
  padding: 0 16px;
  // padding-inline-end: 16px;
  border-radius: 4px;
}
.price-text {
  position: absolute;
  top: 11px;
  left: 18px;
  line-height: 20px;
  z-index: 10;
  font-size: 14px;
}
.is-rtl {
  .price-text {
    right: 18px;
    left: auto;
  }
}
.w_100 {
  width: 100%;
}
.customer-input {
  height: 38px;
  margin-inline-end: 16px;
  :deep(.el-input__inner) {
    color: @font_42;
    text-align: end !important;
    padding: 0 15px;
  }
}
.mb-16 {
  margin-bottom: 16px;
}
.mb-12 {
  margin-bottom: 12px;
}
.mr-10 {
  margin-inline-end: 10px;
}
.deal-center {
  width: 62.55%;
  min-height: 775px;
  padding-bottom: 10px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.p-center {
  padding: 0 16px;
  box-sizing: border-box;
}
.trans-tabbox {
  width: 100%;
  height: 36px;
  // border-bottom: 1px solid;
}
.trans-tab {
  margin-inline-end: 30px;
  height: 100%;
  line-height: 36px;
  position: relative;
}
// 选择框
.select-frame {
  height: 100%;
  padding-inline-start: 16px;
  margin-inline-start: -16px;
  // border-right: 1px solid;
  position: relative;
  padding-inline-end: 3px;
  // width: 120px;
}
.selectbox {
  width: 24px;
  height: 16px;
  line-height: 16px;
  img {
    width: 11px;
    height: 6px;
    display: block;
  }
}
.num-nover {
  width: 120px;
  height: 88px;
  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1);
  position: absolute;
  left: -16px;
  top: 35px;
  // border: 1px solid;
  padding: 10px;
  z-index: 99;
}
.num {
  width: 100%;
  height: 36px;
  line-height: 36px;
}
.num:hover {
  background: #f8f8f8;
}
.quote-btn {
  width: 100%;
  height: 46px;
  line-height: 46px;
  border-radius: 100px;
}
.block {
  display: block;
}
.lr-5 {
  margin: 0 5px;
}
</style>
<style lang="less">
.el-slider__button {
  border: 2px solid @slider;
  background-color: @red;
}
.el-slider__bar {
  background-color: @red;
}
</style>
